<template>
  <div class="page">
    <div class="f-r-s-c mt20">
      <div class="avatar"></div>
      <div class="ml10">
        <span class="t-mw">Home</span>
        <svg-icon name="ice_cream" width="20px" height="20px"></svg-icon>
        <svg-icon name="ok" width="20px" height="20px" color="#f00"></svg-icon>
        <svg-icon
          name="left_arrow"
          width="20px"
          height="20px"
          color="#f00"
        ></svg-icon>
        <span style="background: black">
          <svg-icon
            name="left_arrow_white"
            width="20px"
            height="20px"
            color="#f00"
          ></svg-icon>
        </span>
      </div>
    </div>
    <hr />
    <div>
      <p>Parent:msg {{ theMsg }}</p>
      <Child v-model:msg="theMsg"></Child>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { getInfo } from "@/apis/HomeApi";
import SvgIcon from "@/components/SvgIcon.vue";
import ids from "virtual:svg-icons-names";
import Child from "@/components/Child.vue";
export default {
  name: "Home",
  components: { SvgIcon, Child },
  props: {},
  setup(props, context) {
    console.log("ids:", ids);

    const theMsg = ref("这是v-model:xxxx");
    getInfo().then(console.log).catch(console.log);

    return {
      theMsg,
    };
  },
};
</script>
<style lang="less" scoped>
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: url("../assets/logo.png") center / contain no-repeat;
}
</style>